<template>
  <div style="width:100%;height:100%">
    <div style="height: 50px;">
      <el-row type="flex" :gutter="100" align="bottom">
        <el-col :span="6">
          <el-select clearable style="width: 150px" v-model="attendanceStatus" placeholder="选择状态">
            <el-option
              :key="'0'"
              label="进行中"
              value="0">
            </el-option>
            <el-option
              :key="'1'"
              label="结束"
              value="1">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select clearable style="width: 150px" v-model="CourseValue" placeholder="选择课程">
            <el-option
              v-for="item in Courseoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-input style="width: 200px" v-model="student" autosize prefix-icon="el-icon-document" placeholder="输入学生姓名进行搜索"></el-input>
        </el-col>
        <el-col :span="6">
          <el-select clearable style="width: 150px" v-model="attendanceResult" placeholder="选择结果">
            <el-option
              v-for="item in attendanceResults"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
    </div>
    <div style="height: 50px">
      <el-row type="flex" :gutter="100" align="bottom" style="margin-top: 10px">
        <el-col :span="24">
          <el-button  @click="search" type="primary">搜索结果</el-button>
          <el-button type="success" @click="publish">发布考勤</el-button>
          <el-button type="warning" @click="exportExcel">导出excel</el-button>
          <el-button type="info" @click="publish">查看分析图</el-button>
        </el-col>

      </el-row>
    </div>
    <div style="height: -webkit-calc(100% - 100px);margin-top: 5px">
      <xjr-table @custom-click="handleAttendance" :loading="loading" ref="course_table" :list="tableData" :headers="cols"></xjr-table>
    </div>
    <el-dialog :destroy-on-close="true"  width="30%" title="编辑考勤" :visible.sync="showDialog">
      <el-form ref="form" :model="currentAttendance" label-width="80px">
        <el-form-item label="学生姓名" >
          <el-input :disabled="true" v-model="currentAttendance.studentName"></el-input>
        </el-form-item>
        <el-form-item label="考勤课程">
          <el-input :disabled="true" v-model="currentAttendance.courseName"></el-input>
        </el-form-item>
        <el-form-item label="考勤规定时间" >
          <el-date-picker
            disabled
            v-model="currentAttendance.allowStartTime"
            type="datetime"
            placeholder="修改考勤规定时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="考勤规定最晚时间" >
          <el-date-picker
            disabled
            v-model="currentAttendance.allowTimeDifference"
            type="datetime"
            placeholder="修改考勤时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="考勤时间" required>
          <el-date-picker
            disabled=""
            v-model="currentAttendance.attendanceStartTime"
            type="datetime"
            placeholder="修改考勤时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="考勤状态"  prop="attendanceResultCode">
          <el-select @change="changeStatus" clearable style="width: 150px" v-model="currentAttendance.attendanceResultCode" placeholder="修改考勤状态">
            <el-option
              label="正常"
              :value="1">
            </el-option>
            <el-option
              label="迟到"
              :value="0">
            </el-option>
            <el-option
              label="缺勤"
              :value="2">
            </el-option>
            <el-option
              label="请假"
              :value="3">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专业">
          <el-input :disabled="true" v-model="currentAttendance.majorName"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="save">保存</el-button>
        <el-button type="primary" @click="showDialog=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "AdminAttendanceManage",
    data(){
      return {
        currentAttendance:{},//当前操作的考勤信息
        showDialog:false,
        attendanceStatus:'',//考勤状态
        tableData:[],//表格数据
        tableDataCache:[],
        loading:false,//表格状态
        Courseoptions:[],
        student:'',
        attendanceResult:'',
        attendanceResults:[{
          label:'缺勤',value:'2'
        },{
          label:'迟到',value:'0'
        },
          {
            label:'请假',value:'3'
          },
          {
            label:'正常',value:'1'
          }],
        CourseValue:'',//当前选中课程
        cols:[
          {prop:'studentNo',label:'学号',sort:false,hidden:false},
          {prop:'studentName',label:'学生姓名',sort:false,hidden:false},
          {prop:'courseName',label:'考勤课程',sort:false,hidden:false},
          {prop:'className',label:'班级',sort:false,hidden:false},
          {prop:'majorName',label:'专业',sort:false,hidden:false},
          {prop:'gradeName',label:'年级',sort:false,hidden:false},
          {prop:'departmentName',label:'学院',sort:false,hidden:false},
          {prop:'assistantName',label:'辅导员',sort:false,hidden:false},
          {prop:'attendanceStartTime',label:'考勤时间',sort:false,hidden:false,dataType:'date'},
          {prop:'attendanceResult',label:'考勤结果',sort:false,hidden:false},
          {prop:'ip',label:'ip地址',sort:false,hidden:false},
          {prop:'operate',label:'操作',hidden:false,options:[
              {label:'编辑',prop:'edit',type: 'success'}
            ]},
          {prop:'operate',label:'永久操作',hidden:false,options:[
              {label:'删除',prop:'delete',type: 'warning'}
            ]}
        ]

      }
    },
    methods:{
      //弹窗下拉框选中事件
      changeStatus(){
        this.$set(this.currentAttendance,'changed',true);
      },
      handleAttendance(index,row,customtype){
        let g=this;
        if (customtype=='edit'){
           g.currentAttendance=JSON.parse(JSON.stringify(row));
           g.$set(g.currentAttendance,'changed',false);
           g.showDialog=true;
        }else{
          //删除操作
          g.$confirm('此操作将永久删除该考勤信息, 会直接导致该学生无法正常考勤，是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            g.$ajaxDelete(`/attendanceSon/${row.attendanceSonId}`).then(res=>{
              g.message({message:'删除成功',type:'success'});
              g.init();
            })
          }).catch(() => {
            g.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        }

      },
      search(){
        let g=this;
        g.tableDataCache=[];
        g.tableData=[];
        g.Courseoptions=[];
        this.init().then(res=>{
          g.$nextTick(()=>{
            g.tableData=g.tableData.filter(data=>{
              if (!g.isNullOrEmpty(g.attendanceResult)){
                return data.attendanceResultCode==g.attendanceResult
              }
              return true;
            }).filter(data=>{
              if (!g.isNullOrEmpty(g.student)){
                return (data.studentName.indexOf(g.student))!=-1
              }
              return true;
            }).filter(data=>{
              if (!g.isNullOrEmpty(g.CourseValue)){
                return data.courseNo==g.CourseValue
              }
              return true;
            }).filter(data=>{
              if (!g.isNullOrEmpty(g.attendanceStatus)){
                return data.attendanceStatus==g.attendanceStatus
              }
              return true;
            });
          })

        });
      },
      //发布考勤
      publish(){
        let g=this;
        g.$ajaxGet('/attendanceParent/all',{publishNo:g.$store.getters.userId,totalSuccessFlag:0}).then(res=>{
          if (!g.isNullOrEmpty(res) && res.length>0){
            g.message({type:'warning',message:'当前有未完成考勤任务,暂时不能发布考勤'});
          }else{
            g.$router.push({path:'/attendance-manage/publish-attendance',replace:true})
          }
        })
      },
      async init() {
        let g=this;
        g.tableDataCache= await this.$ajaxGet('/attendanceParent/getAttendanceInfo');
        g.tableData=JSON.parse(JSON.stringify(g.tableDataCache)).map(data=>{
          switch (data.attendanceResultCode) {
            case 0:
              data.attendanceResult='迟到';
              break;
            case 1:
              data.attendanceResult='正常';
              break;
            case 2:
              data.attendanceResult='缺勤';
              break;
            case 3:
              data.attendanceResult='请假';
              break;
            default:
              data.attendanceResult='';
              break;
          }
          return data
        });
        g.$nextTick(()=>{
          //加载课程
          g.$ajaxGet('/course/all',{teacherId:g.$store.getters.userId}).then(data=>{
            g.Courseoptions=data.map(res=>{
              g.$set(res,'label',res.courseName);
              g.$set(res,'value',res.courseNo);
              return res;
            })
          })
        })


      },
      formatJson(filterVal, jsonData) {
        let g=this;
        return jsonData.map(v => filterVal.map(j => {
          if (g.isNullOrEmpty(v[j])){
            v[j]='无';
          }
          return v[j]

        }))
      },
      exportExcel(){
        let g=this;
        import('@/vendor/Export2Excel').then(excel => {
          let tHeader = g.cols.map(res=>{
            return res.label
          })
          tHeader.splice(g.cols.length-1,1);

          let list = g.tableData
          let filterVal=g.cols.map(res=>res.prop);
          filterVal.splice(g.cols.length-1,1);
          let data = g.formatJson(filterVal, list)
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: 'excel-list',
            autoWidth: true
          })

        })

      },
      //弹窗保存事件
      save(){
        let g=this;
        if (!g.isNullOrEmpty(g.currentAttendance) && g.currentAttendance.changed==true){
          if (g.isNullOrEmpty(g.currentAttendance.attendanceResultCode)){
            g.message({type:'error',message:'考勤状态不得为空'});
            return;
          }else{
            g.$ajaxPost('/attendanceSon/update',{guid:g.currentAttendance.attendanceSonId,attentanceFlag:g.currentAttendance.attendanceResultCode,successFlag:1}).then(res=>{
              g.$alert('更新成功', '提示', {
                confirmButtonText: '确定',
                callback: action => {
                  g.showDialog=false;
                }
              });
            }).then(res=>{

            })
          }
        }else{
          g.message({message:'未作修改',type:'warning'});
          return;
        }
      }
    },
    created() {
      this.init();
    }

  }
</script>

<style scoped>

</style>
